<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [

<!ENTITY % celtxDTD SYSTEM "chrome://celtx/locale/celtx.dtd">
%celtxDTD;

]>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>&form.sceneDetails;</title>
<style>

@import url(chrome://celtx/content/editors/datasheet.css);
@import url(chrome://celtx/content/editors/editors.css);

body {
margin: 20px;
font-family: helvetica, arial, verdana;
font-size: 12px;
}
textarea {
height:100px;
width: 90%;
font-family: helvetica, arial, verdana;
font-size: 12px;
padding: 1px;
}
p {
float: left;
width: 50%;
}
td {
width: 50%;
margin: 5px 0px;
vertical-align:top;
}
br {
clear: both;
}

input {
width:90%;
}

.container {
margin-bottom: 15px;
}

.scene {
  background-color: lightgreen;
  border: 1px solid green;
  padding: 5px 2px 5px 10px;
  font-weight: normal;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
}

.contents {
  border: 1px solid green;
  border-top: 0px;
  background-color: #FFFFFF;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  padding: 5px 0px 8px 20px;
}
.print {
display:none;
}

@media print {
.print{
display: inline;
width:90%;
}
textarea {
display:none;
}
input {
display:none;
}
.button {
display: inline;
}
}

</style>

<script type="application/x-javascript"
        src="chrome://celtx/content/editors/datasheet.js" />

</head>
<body>
<form>

<div class="container0">
  <div class="scene">
    <span style="font-weight:bold;">&form.sceneDetails;&colon; </span> <span> <input type="text" id="name" name="title" style="width:35%;"/><div class="print"></div></span> <span style="font-weight:bold;padding-left: 3%;">&tags.label;&colon; </span> <span> <input type="text" id="tags" name="tags" style="width:35%;"/><div class="print"></div></span>
  </div>
  <div class="contents">
    <p>&form.alternate;&colon;<br />
    <input type="text" name="alter-name" style="width:90%;"/><div class="print"></div></p>
    <br />
  <table width="100%">
  <tr><td>&form.description;&colon;</td><td>&form.media;&colon;</td></tr>
  <tr><td><textarea cols="3" name="description"></textarea><div class="print"></div></td><td><medialist name="media"></medialist></td></tr>
  </table>
    <br />
  </div>
</div>

<br/>


<div class="container">
  <div class="scene">
    <a href="javascript: expandCollapse('toggle-1', 'expand-1');">
      <img id="toggle-1" class="plusminus" alt="expand"
           src="chrome://celtx/skin/minus.png" />
    </a>
    <span style="font-weight:bold;">&form.sceneDetails;</span>
  </div>
  <div id="expand-1" class="contents">
    <p>&form.centralEvent;<br />
    <textarea type="text" name="event"></textarea><div class="print"></div></p>
    <p>&form.affectEvent;<br />
    <textarea type="text" name="plot"></textarea><div class="print"></div></p>
    <br />
    <p>&form.sceneChars;<br />
    <textarea type="text" name="chars"></textarea><div class="print"></div></p>
    <p>&form.sceneSetting;<br />
    <textarea type="text" name="set"></textarea><div class="print"></div></p>
    <br />
    <p>&form.sceneWhen;<br />
    <textarea type="text" name="when"></textarea><div class="print"></div></p>
    <p>&form.sceneMood;<br />
    <textarea type="text" name="mood"></textarea><div class="print"></div></p>
    <br />
  </div>
</div>

<div class="container">
  <div class="scene">
    <a href="javascript: expandCollapse('toggle-2', 'expand-2');">
      <img id="toggle-2" class="plusminus" alt="expand"
           src="chrome://celtx/skin/minus.png" />
    </a>
    <span style="font-weight:bold;">&form.protagAntag;</span>
  </div>
  <div id="expand-2" class="contents">
    <p>&form.protagWho;<br />
    <input type="text" name="protagonist" /><div class="print"></div></p>
    <p>&form.antagWho;<br />
    <input type="text" name="antagonist" /><div class="print"></div></p>
    <br />
    <p>&form.sceneProtagGoal;<br />
    <textarea type="text" name="pro_goal"></textarea><div class="print"></div></p>
    <p>&form.sceneAntagGoal;<br />
    <textarea type="text" name="an_goal"></textarea><div class="print"></div></p>
    <br />
    <p>&form.sceneProtagAchieve;<br />
    <textarea type="text" name="pro_achieve"></textarea><div class="print"></div></p>
    <p>&form.sceneAntagAchieve;<br />
    <textarea type="text" name="an_achieve"></textarea><div class="print"></div></p>
    <br />
  </div>
</div>


</form>
</body>
</html>
